<template>
  <div class="w-full h-80 bg-white border-b">
    <div class="max-w-5xl h-full mx-auto flex flex-col justify-between">
      <!-- 基本信息 -->
      <div class="w-full h-4/5 flex justify-start pt-16">
        <div class="w-36 h-full flex justify-around relative">
          <div>
            <n-avatar round :size="96" :src="userInfo?.avatar" />
            <div class="avatar-overlay" v-if="userInfo?.isSelf">
              <n-icon color="white" :size="50" @click="doShowAvatarModal">
                <camera-icon />
              </n-icon>
            </div>
          </div>
        </div>
        <div class="w-3/5">
          <!-- 姓名 -->
          <div class="pb-2 flex items-center">
            <n-ellipsis :line-clamp="1" :tooltip="false">
              <n-text class="text-2xl">{{ userInfo?.name }}</n-text>
            </n-ellipsis>
            <n-button
              quaternary
              size="tiny"
              v-if="userInfo?.isSelf"
              @click="doShowProfileModal"
            >
              <template #icon>
                <n-icon>
                  <edit-icon />
                </n-icon>
              </template>
              编辑
            </n-button>
          </div>
          <div>
            <n-ellipsis :line-clamp="1" :tooltip="false">
              <!-- 学历 -->
              <n-text depth="2" v-show="userInfo?.degree">
                {{ userInfo?.degree }}
              </n-text>
              <!-- 机构 -->
              <n-text depth="2" v-show="userInfo?.institution">
                {{ userInfo?.degree ? ' · ' : '' }}{{ userInfo?.institution }}
              </n-text>
              <!-- 职级 -->
              <n-text depth="2" v-show="userInfo?.position">
                · {{ userInfo?.position }}
              </n-text>
              <!-- 领域 -->
              <n-text depth="2" v-show="userInfo?.field">
                · {{ userInfo?.field }}
              </n-text>
            </n-ellipsis>
          </div>
          <!-- 部门 -->
          <div v-show="userInfo?.department">
            <n-ellipsis :line-clamp="1" :tooltip="false">
              <n-text depth="2">{{ userInfo?.department }}</n-text>
            </n-ellipsis>
          </div>
          <!-- 活动简介 -->
          <div v-show="userInfo?.currentActivity">
            <n-ellipsis :line-clamp="3" :tooltip="false">
              <n-icon size="20" color="#767C82">
                <chat-icon />
              </n-icon>
              <n-text depth="3" :italic="true">
                {{ userInfo?.currentActivity }}
              </n-text>
            </n-ellipsis>
          </div>
        </div>
      </div>
      <!-- 功能栏 -->
      <div class="w-full border-t flex justify-between items-center">
        <n-tabs size="large" :value="tabValue">
          <n-tab name="profile" @click="tabChange('profile')"> 简介 </n-tab>
          <n-tab name="research" @click="tabChange('research')">
            科研成果
          </n-tab>
          <n-tab name="project" @click="tabChange('project')"> 项目 </n-tab>
          <n-tab name="stats" @click="tabChange('stats')"> 状态 </n-tab>
        </n-tabs>
        <div class="flex justify-between items-center">
          <n-button type="primary" v-if="userInfo?.isSelf" @click="addResearch">
            <template #icon>
              <n-icon>
                <add-icon />
              </n-icon>
            </template>
            添加科研成果
          </n-button>
          <n-button
            type="primary"
            v-if="!userInfo?.isSelf"
            class="follow-btn"
            @click="changeFollow"
          >
            <template #icon v-if="!userInfo?.isFollowing">
              <n-icon>
                <like-icon />
              </n-icon>
            </template>
            {{ userInfo?.isFollowing ? '取消关注' : '关注' }}
          </n-button>
          <n-button v-if="!userInfo?.isSelf" @click="toChat"> 私信 </n-button>
        </div>
      </div>
      <!-- 头像更换模态框 -->
      <AvatarModal
        :tmpUserInfo="tmpUserInfo"
        :showAvatarModal="showAvatarModal"
        @submit="submitCallback"
        @close="showAvatarModal = false"
      />
      <!-- 基本信息编辑模态框 -->
      <ProfileModal
        :tmpUserInfo="tmpUserInfo"
        :showProfileModal="showProfileModal"
        @submit="submitCallback"
        @close="showProfileModal = false"
        @update:tmpUserInfo="tmpUserInfo = $event"
      />
    </div>
  </div>
</template>

<script setup>
import {
  AddCircleOutline as AddIcon,
  ChatboxEllipsesSharp as ChatIcon,
  CameraOutline as CameraIcon,
  Pencil as EditIcon,
  HeartOutline as LikeIcon
} from '@vicons/ionicons5'
import AvatarModal from './AvatarModal.vue'
import ProfileModal from './ProfileModal.vue'
import api from '@/api/api'

const props = defineProps(['userInfo', 'uid'])
const emit = defineEmits()

const route = useRoute()
const router = useRouter()
const message = useMessage()
const showAvatarModal = ref(false)
const showProfileModal = ref(false)
const tmpUserInfo = ref(null)
const tabValue = ref('profile')

watch(
  () => props.userInfo,
  () => {
    tmpUserInfo.value = { ...props.userInfo }
  }
)

watch(
  () => route.name,
  () => {
    init()
  }
)

onMounted(() => {
  init()
})

const init = () => {
  switch (route.name) {
    case 'Profile':
      tabValue.value = 'profile'
      break
    case 'UserResearch':
      tabValue.value = 'research'
      break
    case 'UserProject':
      tabValue.value = 'project'
      break
    case 'UserStats':
      tabValue.value = 'stats'
      break
  }
}

const tabChange = (tab) => {
  tabValue.value = tab
  switch (tab) {
    case 'profile':
      router.push({ name: 'Profile' })
      break
    case 'research':
      router.push({ name: 'UserResearch' })
      break
    case 'project':
      router.push({ name: 'UserProject' })
      break
    case 'stats':
      router.push({ name: 'UserStats' })
      break
  }
}

const doShowAvatarModal = () => {
  tmpUserInfo.value.avatar = props.userInfo?.avatar
  showAvatarModal.value = true
}

const doShowProfileModal = () => {
  tmpUserInfo.value = { ...props.userInfo }
  showProfileModal.value = true
}

// 修改信息
const changeProfile = () => {
  return new Promise((resolve) => {
    api.User.changeProfile({ profile: tmpUserInfo.value }).then((res) => {
      if (res.success) {
        emit('update:userInfo', tmpUserInfo.value)
        localStorage.setItem('name', tmpUserInfo.value.name)
        resolve(true)
      } else {
        message.warning('信息更改失败，请重试')
        resolve(false)
      }
    })
  })
}

const submitCallback = async () => {
  const result = await changeProfile()
  if (result) {
    showAvatarModal.value = false
    showProfileModal.value = false
  }
}

// 新增研究成果
const addResearch = () => {
  router.push('/research/add')
}

// 修改关注状态
const changeFollow = () => {
  api.User.changeFollow({
    id: props.uid,
    isFollowing: !props.userInfo.isFollowing
  }).then((res) => {
    if (res.success) {
      props.userInfo.isFollowing = !props.userInfo.isFollowing
    } else {
      message.warning('请重试')
    }
  })
}

// 私信
const toChat = () => {
  window.open(`/message/chat/${props.uid}`, '_blank')
}
</script>

<style scoped>
.avatar-overlay {
  position: absolute;
  top: 0;
  height: 96px;
  width: 96px;
  opacity: 0;
  background-color: #ff9440;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-overlay:hover {
  opacity: 0.7;
}
.follow-btn {
  margin-right: 1rem;
}
</style>
